
<template>
  <div class="app-container action-account-container">
    <div class="back-content flex-normal">
      <span class="back-icon el-icon-back" @click="$router.go(-1)"></span>
      <span class="back-label">账户开户</span>
    </div>
    <div class="action-account-main">
      <div class="check-status-content flex-column" v-if="baseData.shopMessageStatus != '5'">
        <template v-if="baseData.shopMessageStatus == '3'">
          <svg-icon class="check-success" icon-class="check-success"></svg-icon>
          <div class="status-txt-content flex-normal">
            <span class="status-txt">您的开户申请已受理成功，请完善以下信息，完成开户</span>
          </div>
        </template>
        <template v-if="baseData.shopMessageStatus == '2'">
          <svg-icon class="check-ing" icon-class="check-ing"></svg-icon>
          <div class="status-txt-content flex-normal">
            <span class="status-txt">系统正在审核中，请稍后</span>
          </div>
        </template>
        <template v-if="baseData.shopMessageStatus == '4'">
          <svg-icon class="check-fail" icon-class="check-fail"></svg-icon>
          <div class="status-txt-content flex-normal">
            <span class="status-txt">资质审核失败，请</span>
            <span class="status-btn" @click="jumpPage('actionAccount')">重新提交</span>
          </div>
        </template>
      </div>
      <template v-if="baseData.shopMessageStatus == '3' || baseData.shopMessageStatus == '5'">
        <slot name="form" :id="id"></slot>
      </template>
    </div>
  </div>
</template>

<script>
import {
  getFinanceIndex
} from "@/api/financeManage/shop-finance";
export default {
  data() {
    return {
      id: '',
      boo: {
        loading: true
      },     
      baseData: {
        shopMessageStatus: 1
      }
    };
  },
  mounted(){
    let _self = this
    _self.queryFinanceIndex()
  },
  methods: {
    jumpPage(routeName){
      let _self = this
      _self.$router.push({name: routeName})
    },
    queryFinanceIndex(){
      let _self = this
      _self.boo.loading = true
      getFinanceIndex().then(res => {
        _self.baseData = res.data
        let {id} = res.data['shopMessage']
        _self.id = id
      }).finally(() => _self.boo.loading = false)
    },
  }
};
</script>
<style scoped lang="scss">
.back-content{
  padding: vh(25) vw(30);
  .back-icon{
    font-size: vh(26);
    cursor: pointer;
  }
  .back-label{
    margin-left: vw(20);
    font-size: 13px;
    color: #3D3D3D;
  }
}
.action-account-container {
  min-height: calc(100vh - 80px);
  .check-status-content{
    align-items: center;
    justify-content: center;
    margin-bottom: vh(80);
    margin-top: vh(80);
    width: vw(660);
    .check-success{
      width: vh(60);
      height: vh(60);
    }
    .check-ing{
      width: vh(95);
      height: vh(95);
    }
    .check-fail{
      width: vh(95);
      height: vh(95);
    }
    .status-txt-content{
      margin-top: vh(30);
      .status-txt{
        font-size: vh(16);
        color: #3D3D3D;
      }
      .status-btn{
        font-size: vh(16);
        color: #0256FF;
        cursor: pointer;
        margin-left: vh(10);
        font-weight: 400;
      }
    }
  }
  .action-account-main{
    align-items: flex-start;
  }
  .check-warning{
    padding-left: vw(20);
    .desc-icon{
      color: #F7B212;
    }
    .desc-txt{
      margin-left: vw(10);
      font-size: vh(12);
      color: #7F7F7F;
    }
  }
}
</style>